<template>
  <div class="circular"></div>
</template>
<script>
export default {
  name: "circular",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      content: [],
    };
  },
  methods: {
    setup(data) {
      let circular = this.$echarts.init(this.$el);
      let option = {
          title:{
              text:"文章标签分类统计图",
              show:true
              },
        series: [
          {
            type: "pie",
            data,
            radius: "40%",
            label:{
                show: true,
            },
            emphasis: {
              label: {
                show: true,
                formatter: "{b}:{c}",
                position: [70, 10],
                width: 100,
                height: 40,
                color: "#fff",
                backgroundColor: "rgba(0, 0, 0, 0.81)",
                verticalAlign: "middle",
                align: "center",
              },
            },
          },
        ],
      };
      circular.setOption(option);
    },
  },
  watch: {
    data() {
      for (let item in this.data) {
        this.content.push({
          value: this.data[item],
          name: item,
        });
      }
      this.setup(this.content);
    },
  },
};
</script>
<style scoped>
.circular {
  width: 300px;
  height: 300px;
}
</style>